<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>求职{{ detail ? detail.title : '--' }}</h1>
          <!--     订单状态 1待审核/2进行中/3已暂停/4已结束/5已取消     -->
          <el-tag v-if="detail.state === 1" type="success">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 2">{{ detail.stateStr }}</el-tag>
          <el-tag v-if="detail.state === 3" type="warning">{{ detail.stateStr }} </el-tag>
          <el-tag v-if="detail.state === 4" style="color: #dee2e6" color="#6d6d72">
            {{ detail.stateStr }}
          </el-tag>
          <el-tag v-if="detail.state === 5" type="info"> {{ detail.stateStr }} </el-tag>
        </div>
        <div class="company-title-box__credit">订单号：{{ detail ? detail.orderNo : '--' }}</div>
      </div>
      <div class="company-title-box-btn">
        <el-button
          type="primary"
          plain
          size="mini"
          v-if="detail.state !== 4 && detail.state !== 5"
          @click="handleUpdate(detail.id)"
          >编辑</el-button
        >
        <el-button
          type="warning"
          plain
          size="mini"
          v-if="detail.state === 2 && detail.state !== (4 || 5)"
          @click="handleUpdateState(detail.id, 3)"
          >暂停</el-button
        >
        <el-button
          type="warning"
          plain
          size="mini"
          v-if="detail.state === 3 && detail.state !== (4 || 5)"
          @click="handleUpdateState(detail.id, 2)"
          >恢复</el-button
        >
        <el-button
          type="danger"
          plain
          size="mini"
          v-if="detail.state !== 1 && detail.state !== 4 && detail.state !== 5"
          @click="handleUpdateState(detail.id, 4)"
          >结束</el-button
        >
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions :column="1" title="| 求职信息" :label-style="{ marginLeft: '40px' }">
        <el-descriptions-item label="求职标题">
          {{ detail.title }}
        </el-descriptions-item>
        <el-descriptions-item
          label="求职船员"
          :label-style="{ marginLeft: '40px', marginTop: '12px' }"
        >
          <el-row>
            <el-col :span="8">
              <el-avatar v-if="detail.avatar" :src="detail.avatar" />
              <el-avatar v-else>{{ detail.nickName }}</el-avatar>
            </el-col>
            <el-col :span="16">
              <el-row>
                <el-col>{{ detail.nickName }}</el-col>
              </el-row>
              <el-row>
                <el-col>{{ detail.mobile }}</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ detail.name }}
        </el-descriptions-item>
        <el-descriptions-item label="年龄">
          {{ detail.age }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ detail.sexStr }}
        </el-descriptions-item>
        <el-descriptions-item label="所在城市">
          {{ detail.province }}{{ detail.city }}
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          {{ detail.education }}
        </el-descriptions-item>
        <el-descriptions-item label="工作经验">
          {{ detail.experience }}
        </el-descriptions-item>
        <el-descriptions-item label="证书资格类别">
          {{ detail.credentialsTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="证书等级">
          {{ detail.credentialsLevelStr }}
        </el-descriptions-item>
        <el-descriptions-item label="截止日期">
          {{ detail.endDate }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ detail.remark ? detail.remark : '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建方式">
          {{ detail.createTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="创建人">
          {{ detail.createBy }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ detail.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { batchUpdateState, getDetail } from '@/api/orders/orderStaff';

export default {
  data() {
    return {
      detail: {
        id: null, // id
        orderNo: '', // 订单号
        title: '', // 标题
        nickName: '', // 昵称
        avatar: null, // 头像
        name: '', // 姓名
        age: '', // 年龄
        sex: 1, // 性别
        sexStr: '', // 性别
        province: '', // 省
        city: '', // 市
        education: '', // 学历
        experience: '', // 工作经验
        credentialsType: null, // 证书类别
        credentialsTypeStr: '', // 证书类别
        credentialsLevel: null, // 证书等级
        credentialsLevelStr: '', // 证书等级
        endDate: '', // 截止日期
        remark: null, // 备注
        createType: 0, // 创建方式
        createTypeStr: '', // 创建方式
        createBy: '', // 创建人
        createTime: '', // 创建时间
      },
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    // 获取求职订单详情
    getDetail() {
      getDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
      });
    },
    /**
     * 编辑
     * @param id
     */
    handleUpdate(id) {
      this.$router.push({ name: 'OrdersStaffSave', query: { id: id } });
    },
    /**
     * 暂停
     * @param id
     * @param state
     */
    handleUpdateState(id, state) {
      let title = '';
      if (state === 3) {
        title = '暂停';
      } else if (state === 2) {
        title = '恢复';
      } else if (state === 4) {
        title = '结束';
      }
      this.$confirm('确定将订单' + title + '？暂停后订单将不展示', title, {
        confirmButtonText: title,
      }).then(() => {
        batchUpdateState({ ids: id, state: state }).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.getOrderProjectDetail();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
